<template>
    <div class="route-sty">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol" style="padding-top:10px">
            <a-form-item  label="路由定义" v-bind="validateInfos.routeId">
                <a-input style="width:96%" v-model:value="routeData.routeId" size="large" placeholder="请输入路由id" />
                &nbsp;
                <span>
                    <a-tooltip placement="top" style="width:200px">
                        <template #title>
                            <span>{{routeIdMsg}}</span>
                        </template>
                        <question-circle-two-tone twoToneColor='#B8A11B'/>
                    </a-tooltip>
                </span>
            </a-form-item>
            <a-form-item label="路由名称" v-bind="validateInfos.routeName">
                <a-input style="width:96%" v-model:value="routeData.routeName" size="large"  placeholder="请输入路由名称" />
                &nbsp;
                <span>
                    <a-tooltip placement="top" style="width:200px">
                        <template #title>
                            <span>{{routeNameMsg}}</span>
                        </template>
                        <question-circle-two-tone twoToneColor='#B8A11B'/>
                    </a-tooltip>
                </span>
            </a-form-item>
            <a-form-item label="服务名称" v-bind="validateInfos.routeUrl">
                <a-input style="width:96%" v-model:value="routeData.routeUrl" size="large"  placeholder="请输入服务名称(注册中心服务名或http形式地址)" />
                &nbsp;
                <span>
                    <a-tooltip placement="top" style="width:200px">
                        <template #title>
                            <span>{{serverNameMsg}}</span>
                        </template>
                        <question-circle-two-tone twoToneColor='#B8A11B'/>
                    </a-tooltip>
                </span>
            </a-form-item>
            <a-form-item label="断言类型" v-bind="validateInfos.predicatesType">
                <!-- mode="multiple" tags内嵌 -->
                <a-select
                    style="width:96%"
                    v-model:value="routeData.predicatesType" 
                    @change="changePredicateType"        
                    size="large"
                    placeholder="please select predicates type"
                >
                    <a-select-option value="Path">Path</a-select-option>
                    <a-select-option value="Method">Method</a-select-option>
                    <a-select-option value="Header">Header</a-select-option>
                    <a-select-option value="RemoteAddr">RemoteAddr(指定IP或IP段,当前暂不使用)</a-select-option>
                    <a-select-option value="Weight">Weight(路由权重,当前暂不使用)</a-select-option>
                </a-select>
                &nbsp;
                <span>
                    <a-tooltip placement="top" style="width:200px">
                        <template #title>
                            <span>{{predicateMsg}}</span>
                        </template>
                        <question-circle-two-tone twoToneColor='#B8A11B'/>
                    </a-tooltip>
                </span>
            </a-form-item>
            <a-form-item label="断言值域" v-bind="validateInfos.predicatesValueTest">
                <a-input 
                    v-if="routeData.predicatesType === 'Path' " 
                    style="width:96%" 
                    v-model:value="routeData.predicatesValue" 
                    size="large" placeholder="请输入要断言的请求路径,例:/test/test/** (多个用逗号分割)" 
                />               
                <a-select 
                    v-else-if="routeData.predicatesType === 'Method' "
                    style="width:96%"
                    v-model:value="routeData.predicatesValueArr"
                    mode="multiple"         
                    size="large"
                    placeholder="请选择请求方式"
                >
                    <a-select-option value="GET">GET</a-select-option>
                    <a-select-option value="POST">POST</a-select-option>
                </a-select>
                <a-input 
                    v-else
                    style="width:96%" 
                    v-model:value="routeData.predicatesValue" 
                    size="large" placeholder="请输入要断言的值域" 
                /> 
                &nbsp;
                <span>
                    <a-tooltip placement="top" style="width:200px">
                        <template #title>
                            <span>{{predicatePathMsg}}</span>
                        </template>
                        <question-circle-two-tone twoToneColor='#B8A11B'/>
                    </a-tooltip>
                </span>
            </a-form-item>
            <a-form-item label="选择过滤器" v-bind="validateInfos.filterName">
                <a-select style="width:96%" v-model:value="routeData.filterName" size="large" placeholder="please select your filter">
                    <!-- <a-select-option value=""></a-select-option> -->
                    <a-select-option value="StripPrefix">StripPrefix</a-select-option>
                    <a-select-option value="Token">Token(自定义,暂不使用)</a-select-option>
                </a-select>
                &nbsp;
                <span>
                    <a-tooltip placement="top" style="width:200px">
                        <template #title>
                            <span>{{filterName}}</span>
                        </template>
                        <question-circle-two-tone twoToneColor='#B8A11B'/>
                    </a-tooltip>
                </span>
            </a-form-item>
            <a-form-item label="过滤器值" v-bind="validateInfos.filterValue">
                <a-select 
                    v-if="routeData.filterName === 'StripPrefix' "
                    style="width:96%"
                    v-model:value="routeData.filterValue"         
                    size="large"
                    placeholder="please select predicates value"
                >
                    <a-select-option value="1">1</a-select-option>
                    <a-select-option value="2">2</a-select-option>
                    <a-select-option value="3">3</a-select-option>
                    <a-select-option value="4">4</a-select-option>
                    <a-select-option value="5">5</a-select-option>
                </a-select>
                <a-input 
                    v-if="routeData.filterName !== 'StripPrefix'" 
                    style="width:96%" 
                    v-model:value="routeData.filterValue" 
                    size="large" placeholder="请配置过滤器要截取的路径长度" />
                &nbsp;
                <span>
                    <a-tooltip placement="top" style="width:200px">
                        <template #title>
                            <span>{{filterValue}}</span>
                        </template>
                        <question-circle-two-tone twoToneColor='#B8A11B'/>
                    </a-tooltip>
                </span>
            </a-form-item>
            <a-form-item label="路由类型" v-bind="validateInfos.routeType">
                <a-select style="width:96%" v-model:value="routeData.routeType" size="large" placeholder="please select your routeType">
                    <a-select-option value="0">从注册中心获取</a-select-option>
                    <a-select-option value="1">http形式</a-select-option>
                </a-select>
                &nbsp;
                <span>
                    <a-tooltip placement="top" style="width:200px">
                        <template #title>
                            <span>{{routeType}}</span>
                        </template>
                        <question-circle-two-tone twoToneColor='#B8A11B'/>
                    </a-tooltip>
                </span>
            </a-form-item>
            <a-form-item label="是否启用" v-bind="validateInfos.isOpen">
                <a-radio-group v-model:value="routeData.isOpen" name="radioGroup">
                    <a-radio value="0">启用</a-radio>
                    <a-radio value="1">作废</a-radio>
                </a-radio-group>
                <span style="float:right;margin-right: 30px;">
                    <a-button type="primary" @click.prevent="onSubmit">点击添加</a-button>
                    <a-button style="margin-left: 10px" type="primary" danger @click="resetFields">点击重置</a-button>
                </span>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
import { defineComponent, reactive, toRaw ,ref} from 'vue';
import { Form, message } from 'ant-design-vue';
import { $http } from '@/utils/axios';
  const useForm = Form.useForm;
  export default defineComponent({
    setup() {
        let routeIdMsg = "路由id,唯一,给每组规则配置一个唯一id"
        let routeNameMsg = "路由名称,为上面的id起一个名称,一般写服务名即可"
        let serverNameMsg = "服务名称,写自己后端真正的服务名,根据服务名称去注册中心获取服务信息,完成路由跳转,切不可填错"
        let predicatePathMsg = "断言类型对应的值,若断言多个路径,用逗号分割 /test/t1,/test/t2 注:路径不要以逗号结尾或开头(按规范书写)"
        let filterName = "选择路由需要的过滤器"
        let filterValue = "填写过滤器对应的值"
        let routeType = "路由类型,两种方式:1、从注册中心获取服务 2、直接以http形式跳转"
        let predicateMsg = "断言语法格式(例): - Path: /testGateway/test(多个用逗号分隔)  - Method: GET,POST(多个用逗号分隔) , 则对符合此路径的请求进行断言,除了可配置Path还有请求方法,参数,请求头,等等(详情见官网)"
        //数据
        let routeData = reactive({
            routeId:"",
            routeName:"",
            routeUrl:"",
            predicatesType:"Path",
            predicatesValue:"",
            predicatesValueArr:[],
            filterName:"",
            filterValue:"",
            routeType:"",
            isOpen:""
        });
        //校验
        let rulesRef = reactive({
            routeId: [{
                required: true,
                message: 'Please input routeId',
            }],
            routeName: [{
                required: true,
                message: 'Please input routeName',
            }],
            routeUrl: [{
                required: true,
                message: 'Please input serverName',
            }],
            predicatesType: [{
                required: true,
                message: 'Please select predicatesType',
            }],
            predicatesValueTest: [{
                required: true,
                message: 'Please input predicatesValue',
            }],
            filterName:[{
                required: true,
                message: 'Please select filterName',
            }],
            filterValue:[{
                required: true,
                message: 'Please input filterValue',
            }],
            routeType:[{
                required: true,
                message: 'Please select routeType',
            }],
            isOpen:[{
                required: true,
                message: 'Please select isOpen',
            }]
        });
        //重置
        let {
            resetFields,
            validate,
            validateInfos,
        } = useForm(routeData, rulesRef, {
            onValidate: (...args) => console.log(...args),
        });
    
        //表单提交
        let onSubmit = () => {
            validate().then(() => {
                if(routeData.predicatesType !== 'Method'){
                    routeData.predicatesValueArr = []
                    routeData.predicatesValueArr = routeData.predicatesValue.split(',');                  
                }
                $http.post("/gatewayConfig/insertGatewayRoute",toRaw(routeData)).then((result)=>{
                    // console.log("网关返回结果:",result);
                    if(result.data.data){
                        resetFields()
                        message.success("路由添加成功!!!");
                    }else{
                        message.error(result.data.msg)
                    }
                }).catch(err => {
                    console.log("配置路由异常:",err);
                    message.error("配置路由失败,请联系管理员!!!");
                })
            }).catch(err => {
                message.error("表单数据校验失败");
                console.log('error', err);
            });
        };

        //断言类型 改变触发
        function changePredicateType(){
            routeData.predicatesValue = ""
            routeData.predicatesValueArr = []
            // message.success("改变了")
        }
  
        return {
            routeData,
            labelCol: {
                span: 4,
            },
            wrapperCol: {
                span: 14,
            },
            validateInfos,
            resetFields,
            onSubmit,
            changePredicateType,
            predicateMsg,
            routeIdMsg,
            routeNameMsg,
            serverNameMsg,
            predicatePathMsg,
            filterName,
            filterValue,
            routeType
        };
    },
  
  });
  </script>
  <style scoped>
    .route-sty{
        width: 100%;
        height: 100%;
        background-color: #E6E4D9;
    }
    /* .ant-tooltip ::v-deep .ant-tooltip-placement-top ::v-deep .ant-tooltip-inner{
        min-width: 500px;
    } */

  </style>